import { View, Text, Image } from '@tarojs/components'
import { useLoad, useDidShow } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { useAuth, useUser } from '../../contexts'
import './profile.scss'
import morenImage from '../../assets/images/moren.jpg'

export default function Profile() {
  const { logout, checkAuthState } = useAuth()
  const { userInfo, isLoggedIn } = useUser()

  useLoad(() => {
    // 页面加载时检查认证状态
    checkAuthState()
  })

  // 页面显示时检查登录状态
  useDidShow(() => {
    // 页面显示时重新检查认证状态
    checkAuthState()
  })

  // 处理用户区域点击
  const handleUserAreaClick = () => {
    if (!isLoggedIn) {
      // 未登录，跳转到登录页面
      Taro.navigateTo({
        url: '/pages/login/login'
      })
    } else {
      // 已登录，可以跳转到用户详情页面或显示菜单
      Taro.showToast({
        title: '用户信息页面开发中',
        icon: 'none'
      })
    }
  }

  // 处理退出登录
  const handleLogout = async () => {
    try {
      const res = await Taro.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmText: '退出',
        cancelText: '取消'
      })

      if (res.confirm) {
        logout()
        Taro.showToast({
          title: '退出成功',
          icon: 'success'
        })
      }
    } catch (error) {
      console.error('退出登录失败:', error)
      Taro.showToast({
        title: '退出失败，请重试',
        icon: 'none'
      })
    }
  }

  // 处理功能项点击
  const handleFeatureClick = (type) => {
    switch (type) {
      case 'settings':
        Taro.navigateTo({
          url: '/pages/settings/settings'
        })
        break
      case 'evaluation':
        Taro.showToast({
          title: '我的评价开发中',
          icon: 'none'
        })
        break
      case 'coupon':
        Taro.showToast({
          title: '优惠券功能开发中',
          icon: 'none'
        })
        break
      case 'wallet':
        Taro.showToast({
          title: '钱包功能开发中',
          icon: 'none'
        })
        break
      case 'service':
        Taro.showModal({
          title: '联系客服',
          content: '客服电话：400-123-4567',
          showCancel: false
        })
        break
      case 'about':
        Taro.showModal({
          title: '关于新氧',
          content: '新氧医美小程序\n版本：1.0.0\n© 2024 新氧',
          showCancel: false
        })
        break
      default:
        Taro.showToast({
          title: '功能开发中',
          icon: 'none'
        })
    }
  }

  return (
    <View className='profile'>
      {/* 顶部用户信息区域 */}
      <View className='profile-header'>
        <View className='user-info' onClick={handleUserAreaClick}>
          <Image
            className='user-avatar'
            src={isLoggedIn && userInfo?.avatarUrl ? userInfo.avatarUrl : morenImage}
            mode='aspectFit'
          />
          <View className='user-content'>
            {isLoggedIn && userInfo ? (
              <Text className='user-name'>{userInfo.nickname || '用户'}</Text>
            ) : (
              <Text className='login-text'>登录/注册</Text>
            )}
          </View>
          <View className='arrow-right'>
            <Text className='arrow'>{'>'}</Text>
          </View>
        </View>
      </View>

      {/* 我的订单 */}
      <View className='order-section'>
        <View className='section-header'>
          <Text className='section-title'>我的订单</Text>
          <Text className='view-all'>查看全部订单 {'>'}</Text>
        </View>
        <View className='order-types'>
          <View className='order-type'>
            <View className='order-icon'>
              <Text className='icon-text'>💳</Text>
            </View>
            <Text className='order-label'>待付款</Text>
          </View>
          <View className='order-type'>
            <View className='order-icon'>
              <Text className='icon-text'>📋</Text>
            </View>
            <Text className='order-label'>未使用</Text>
          </View>
          <View className='order-type'>
            <View className='order-icon'>
              <Text className='icon-text'>💰</Text>
            </View>
            <Text className='order-label'>退款</Text>
          </View>
        </View>
      </View>

      {/* 功能列表 */}
      <View className='feature-list'>
        <View className='feature-item' onClick={() => handleFeatureClick('evaluation')}>
          <View className='feature-icon'>
            <Text className='icon-text'>💬</Text>
          </View>
          <Text className='feature-text'>我的评价</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        <View className='feature-item' onClick={() => handleFeatureClick('coupon')}>
          <View className='feature-icon'>
            <Text className='icon-text'>🎫</Text>
          </View>
          <Text className='feature-text'>优惠券</Text>
          <Text className='coupon-count'>0 张可用</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        <View className='feature-item' onClick={() => handleFeatureClick('wallet')}>
          <View className='feature-icon'>
            <Text className='icon-text'>👛</Text>
          </View>
          <Text className='feature-text'>钱包</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        <View className='feature-item' onClick={() => handleFeatureClick('service')}>
          <View className='feature-icon'>
            <Text className='icon-text'>📞</Text>
          </View>
          <Text className='feature-text'>联系客服</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        <View className='feature-item' onClick={() => handleFeatureClick('about')}>
          <View className='feature-icon'>
            <Text className='icon-text'>👤</Text>
          </View>
          <Text className='feature-text'>关于新氧</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        <View className='feature-item' onClick={() => handleFeatureClick('settings')}>
          <View className='feature-icon'>
            <Text className='icon-text'>⚙️</Text>
          </View>
          <Text className='feature-text'>设置</Text>
          <Text className='arrow'>{'>'}</Text>
        </View>

        {/* 退出登录 - 只在已登录时显示 */}
        {isLoggedIn && (
          <View className='feature-item logout-item' onClick={handleLogout}>
            <View className='feature-icon'>
              <Text className='icon-text'>🚪</Text>
            </View>
            <Text className='feature-text logout-text'>退出登录</Text>
            <Text className='arrow'>{'>'}</Text>
          </View>
        )}
      </View>
    </View>
  )
}
